<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=false;" />
<title>LDIR alege morman</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../const.js"></script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../array.js"></script>
<script type="text/javascript" src="../maptypes.js"></script>
<script type="text/javascript" src="../misc.drag.js"></script>
<script type="text/javascript" src="../misc.util.js"></script>
<script type="text/javascript" src="../util/polycluster.js"></script>
<script type="text/javascript" src="../util/polypack.js"></script>

<script type="text/javascript">

var map;
var cluster;
var selectedPoly;

var options = {
  version: 1,
  map: {
    gps: false,
    type: 0,
    zoom: 7,
    lat: 45.94206190505,
    lng: 24.9912554854 
  }
};

var poly_colors = {};
var POLY_COLOR = "#D41A1F";

var oldw = 0;
var oldh = 0;

var MAP_TYPE_IDS = [ 'mtMapMaker', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN ];

//############
function resizeHandler() {
  // get height and width
  winH = (navigator.appName.indexOf("Microsoft")!=-1) ? document.body.offsetHeight : window.innerHeight;
  winW = (navigator.appName.indexOf("Microsoft")!=-1) ? document.body.offsetWidth : window.innerWidth; 
  var mc = document.getElementById('map_canvas');
  // mc.style.width = (winW - 204) + "px";
  mc.style.width = winW + "px";
  mc.style.height = winH + "px";
  
  var oldCenter;
  if (oldw != 0 && oldh != 0)
    oldCenter = map.getCenter();

  // map object
  google.maps.event.trigger(map, 'resize');
  // moveHandler();
  
  oldw = winW;
  oldh = winH;
  if (oldCenter)
    map.setCenter(oldCenter);
}

//############

function loadPolyCluster() {
  cluster.load(county_polygons);
  for (var p in county_polygons)
    setPolyColor(p, POLY_COLOR);
    
  var sel = document.getElementById("sel");
  for (var c in county_names) {
    var opt = document.createElement("option");
    opt.setAttribute("value", c);
    var txt = document.createTextNode(county_names[c]);
    opt.appendChild(txt);
    sel.appendChild(opt);
  }

  map.setCenter(new google.maps.LatLng(options.map.lat, options.map.lng));
}

//############

function setPolyColor(poly, color, doFill) {
  if (doFill) {
    if (selectedPoly)
      setPolyColor(selectedPoly, POLY_COLOR);
    selectedPoly = poly;
    cluster.setColor(poly, {fill: 1, stroke: 1, fillColor: color, strokeColor: color, fillAlpha: 0.4, strokeAlpha: 1, weight: 1});
  }
  else {
    if (selectedPoly == poly)
      selectedPoly = false;
    cluster.setColor(poly, {fill: 0, stroke: 1, fillColor: color, strokeColor: color, fillAlpha: 0, strokeAlpha: 1, weight: 1});
  }
}

//############

function loadJS() {
  
  // load polycluster
  cluster = new PolyCluster();
  cluster.setMap(map);
  google.maps.event.addListener(map, "idle", function() { cluster.repair(); });
  
  // insert polycluster into DOM
  var pcscr = document.getElementById("pcscr");
  if (pcscr) document.body.removeChild(pcscr);
  pcscr = document.createElement("SCRIPT");
  if (pcscr) document.body.appendChild(pcscr);
  pcscr.src = 'counties.js';
  pcscr.id = 'pcscr';
}

//############

function initialize() {
  DragFix.enableWorkaround();

  // map initialization

  map = new google.maps.Map(
    document.getElementById("map_canvas"),
    {
      zoom: options.map.zoom,
      center: new google.maps.LatLng(options.map.lat, options.map.lng),
      mapTypeId: MAP_TYPE_IDS[options.map.type],
      disableDoubleClickZoom: true,
      navigationControl: false,
      mapTypeControl: true,
      mapTypeControlOptions: {
        mapTypeIds: MAP_TYPE_IDS,
        style: google.maps.MapTypeControlStyle.DEFAULT
      },
      scaleControl: true,
      scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT
      }
    }
  );

  map.mapTypes.set('mtMapMaker', mtMapMaker);

  // events
  if (window.attachEvent)
    window.attachEvent("onresize", resizeHandler);
  else
    window.addEventListener("resize", resizeHandler, false);

  map.setMapTypeId('mtMapMaker');
  
  google.maps.event.addListener(map, 'click', function(ev) {
    var p = ev.latLng;
    for (var c in county_polygons)
      if (pointInPolygon(p, county_polygons[c])) {
        selectCounty(c);
        break;  // assumes Buc is before IF and there are no "holes" in the other polys
      }
  });
  
  google.maps.event.addListener(map, 'dblclick', function(ev) { next(); });
  
  setTimeout('loadJS()', 100);
    
  resizeHandler();
}

//############

function next() {
  var val = document.getElementById('sel').value;
  if (val == '')
    return;
  location.href = 'judet.php?c=' + val;
}

//############

function selchanged() {
  selectCounty(document.getElementById('sel').value);
}

//############

function selectCounty(c) {
  setPolyColor(c, POLY_COLOR, true);
  document.getElementById('sel').value = c;
}

//############

function zoomIn() {
  map.setZoom(map.getZoom()+1);
}

//############

function zoomOut() {
  map.setZoom(map.getZoom()-1);
}

</script>
</head>

<body onload="initialize()">
<div id="wrap_main">
  <div id="map_canvas"></div>
  <div id="msg_div">
    <p>&nbsp;Selecta&#x0163;i un jude&#x0163;:
    <select id="sel" name="sel" onchange="javascript:selchanged()"><option value="">...</option></select>
    <input type="button" value=">>" id="next" name="next" onclick="javascript:next()"/>&nbsp;</p>
    <p>... sau dublu-click pe hart&#x0103;</p>
  </div>
  <div id="zoomin_div">
    <a class="dragfix" href="javascript:zoomIn()"><img src="icons/btn-zoomin.png" alt="Zoom In" /></a>
  </div>
  <div id="zoomout_div">
    <a class="dragfix" href="javascript:zoomOut()"><img src="icons/btn-zoomout.png" alt="Zoom Out" /></a>
  </div>
  <div id="cpr_div">
    <p>Powered by GTS Telecom</p>
  </div>
</div>
</body>
</html>
